<template>
    <div>
        
    <mt-swipe :auto="4000"  id="luobo">
       <mt-swipe-item v-for="items in lunboList" :key="items.id">
        <img :src="items.img" alt=""> 
       </mt-swipe-item>
       
    </mt-swipe>
    <!-- 六宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                       <router-link to="/home/newsList">
		                    <img src="../../img/menu1.png" alt="" class="imga">
		                    <div class="mui-media-body">新闻资讯</div>
                       </router-link> 
                        </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../img/menu2.png" alt="" class="imga">
		                    <div class="mui-media-body">图片分享</div></a>
                        </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../../img/menu3.png" alt="" class="imga">
		                    <div class="mui-media-body">商品购买</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../../img/menu4.png" alt="" class="imga">
		                    <div class="mui-media-body">location</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../img/menu5.png" alt="" class="imga">
		                    <div class="mui-media-body">Search</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../img/menu6.png" alt="" class="imga">
		                    <div class="mui-media-body">Phone</div></a></li>
		            
		        </ul> 
    </div>
</template>

<script>
export default {
   data(){
     return {
         lunboList:[],
     }
   },
   created(){
    this.getLunbo()
   },
   methods: {
     getLunbo(){
       this.$http.get("api/getlunbo").then(result =>{
  
          if(result.body.status==0){
             this.lunboList=result.body.message;
            
          }else{
            alert("获取数据失败");
          }

       })
     }
   },
}
</script>

<style lang="scss" scoped>
    #luobo{
        height: 200px;
        .mint-swipe-item:nth-child(1){
          background-color: red; 
        }
        .mint-swipe-item:nth-child(2){
          background-color: blue; 
        }
        .mint-swipe-item:nth-child(3){
          background-color: yellow; 
        }
        img{
          width: 100%;
          height: 100%;
        }
       
    }
    .imga{
      width: 40px;
      height: 40px ;
    }
        
</style>


